<template>
  <div id="LoanServicesDetail">
    <div class="list">
      <div class="top">
        <span class="name">安居贷</span><span class="dw">惠州农信</span>
      </div>
      <div class="top">
        <van-button plain hairline type="info" size="mini" round
          >极速审批</van-button
        >
      </div>
      <van-form validate-first>
        <p class="subTitle"><span class="line"></span>申请人信息</p>
        <div class="inputWrap" v-if="show">
          <van-field
            clickable
            readonly
            name="picker"
            :value="formData.HOUSEAPPLICANT"
            label="农户姓名"
            placeholder="请选择"
            @click="NHXX = true"
          />
          <van-popup v-model="NHXX" position="bottom" get-container="#popup">
            <van-picker
              show-toolbar
              :columns="farmData"
              value-key="HOUSEAPPLICANT"
              @confirm="onConfirm"
              @cancel="NHXX = false"
            />
          </van-popup>
        </div>
        <div class="inputWrap" v-else>
          <van-field
            v-model="formData.HOUSEAPPLICANT"
            label="农户姓名"
            placeholder="请输入农户姓名"
          />
        </div>
        <div class="inputWrap" v-if="show">
          <van-field
            readonly
            v-model="formData.CERTIFICATECODE"
            label="身份证号"
          />
        </div>
        <div class="inputWrap" v-else>
          <van-field
            v-model="formData.CERTIFICATECODE"
            label="身份证号"
            name="validator"
            placeholder="身份证号码"
            :rules="[{ validator, message: '请输入正确身份证号码' }]"
          />
        </div>
        <div class="inputWrap" v-if="show">
          <van-field readonly v-model="formData.APPLYPHONE" label="联系电话" />
        </div>
        <div class="inputWrap" v-else>
          <van-field
            v-model="formData.APPLYPHONE"
            label="联系电话"
            placeholder="请输入联系电话"
            :rules="[
              { required: true, message: '请填写联系电话！' },
              { pattern: /^1[3456789]\d{9}$/, message: '联系电话格式错误！' },
            ]"
            name="pattern"
          />
        </div>
        <div class="inputWrap" v-if="show">
          <van-field
            readonly
            v-model="formData.CONSTRUCITONADDRESS"
            label="建房地址"
          />
        </div>
        <div class="inputWrap" v-else>
          <van-field
            v-model="formData.CONSTRUCITONADDRESS"
            label="建房地址"
            placeholder="请输入建房地址"
          />
        </div>
        <div class="inputWrap color">
          <van-field
            readonly
            :value="formData.dked + '万元及以下'"
            label="贷款额度"
          />
        </div>
        <div class="inputWrap color">
          <van-field
            readonly
            :value="formData.nhll + '%'"
            label="年化利率（单利）"
          />
        </div>
        <div class="inputWrap color">
          <van-field readonly :value="'12~120月'" label="货款期限" />
        </div>
        <div class="inputWrap color">
          <van-field
            readonly
            :value="formData.spsj + '个工作日'"
            label="审批时间"
          />
        </div>
        <div class="inputWrap">
          <van-field readonly :value="'按月还款'" label="还款方式" />
        </div>
        <div class="inputWrap">
          <van-field readonly :value="'信用'" label="担保方式" />
        </div>
        <div class="inputWrap">
          <van-field readonly :value="'个人'" label="适用对象" />
        </div>
        <div class="inputWrap">
          <van-field readonly :value="'消费贷款'" label="贷款类型" />
        </div>
        <div class="inputWrap">
          <van-field readonly :value="'日常消费、住房装修'" label="资金用途" />
        </div>
      </van-form>
      <van-tabs v-model="activeName" color="#007AFF">
        <van-tab title="产品介绍" name="a">
          <p class="text">
            “安居贷”是惠州农信为助力乡村振兴，解决农民建房资金需求，而专门设计开发的一款产品，根据建房面积等信息，自动为您提供授信额度，自动审批，方便便捷。
          </p>
        </van-tab>
        <van-tab title="申请条件" name="b">
          <p class="text">年龄18-60周岁</p>
        </van-tab>
        <van-tab title="所需材料" name="c">
          <p class="text">1.本人真实有效二代身份证</p>
          <p class="text">2.本人惠州农商银行I类借记卡</p>
        </van-tab>
      </van-tabs>
    </div>
    <div class="bottom">
      <van-checkbox v-model="checked"
        >我已阅读并同意<span style="color: #007aff" @click="handleGoTOPDF"
          >《个人授权书》</span
        >，同意银行查询本人信息。</van-checkbox
      >
      <p>
        <van-button type="info" size="normal" round @click="prev"
          >上一步</van-button
        >
        <van-button type="info" size="normal" round @click="next"
          >下一步</van-button
        >
      </p>
    </div>
  </div>
</template>
<script>
import {
  QuerySignCallback,
  GetPrecredit,
  LoanPrecreditSubmit,
} from "@/utils/api";
export default {
  data() {
    return {
      activeName: "a",
      checked: false,
      NHXX: false,
      farmData: [],
      formData: {},
      show: false,
    };
  },
  watch: {},
  mounted() {
    if (ZWJSBridge) {
      ZWJSBridge.setTitle({
        title: "产品详情",
      })
        .then((res) => {
        })
        .catch((err) => {
        });
    }
    this.formData = JSON.parse(this.$route.query.data);

    let idcard = JSON.parse(window.localStorage.getItem("userName")) ? JSON.parse(window.localStorage.getItem("userName")).idcard : "";
    // idcard = "430528199906118211"
    if (idcard != "") {
      this.getData(idcard);
      this.show = true;
    }else{
 this.$toast.fail("未获取到身份证号码!");
    }
  },
  methods: {
    validator(val) {
      var idcardReg =
        /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
      return idcardReg.test(val);
    },
    getData: async function (idcard) {
      let paer = {
        procName: "up_loans",
        dtParams: JSON.stringify([{ I_USERID: idcard, I_TYPE: 1 }]),
        token: window.localStorage.getItem("token"),
      };
      let params = {
        accessCode: "69db6bece3a7480592e2ec753d1e335e",

        cityCode: window.localStorage.getItem("citycode")
          ? window.localStorage.getItem("citycode")
          : "441300000000",
        params: paer,
      };
      const res = await QuerySignCallback(params);
      let data = eval("(" + res.data.data + ")");
      this.farmData = data.Data;
      for (var i in data.Data[0]) {
        this.$set(this.formData, i, data.Data[0][i]);
      }
    },
    onConfirm(val) {
      for (var i in val) {
        this.formData[i] = val[i];
      }
      this.NHXX = false;
    },
    prev() {
      this.$router.push({
        path: "LoanServices",
      });
    },
    handleGoTOPDF() {
      ZWJSBridge.openLink({
        url: 'https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/%E4%B8%AA%E4%BA%BA%E6%8E%88%E6%9D%83%E4%B9%A6.pdf',
      })
        .then((res) => {
        })
        .catch((err) => {
          window.open('https://nfzjszlb.jst.zj.gov.cn/serverfile/zheliban/icon/ZLJ/%E4%B8%AA%E4%BA%BA%E6%8E%88%E6%9D%83%E4%B9%A6.pdf');
        });
    },
    next: async function () {
      if (this.checked) {
        let params = {
          accessCode: "",
          appKey: "",
          certNums: this.formData.CERTIFICATECODE,
        };
        const res = await GetPrecredit(params);
        if (res.data.data && res.data.data.length > 0) {
          if (res.data.data[0].loanLimit) {
            this.$router.push({
              path: "LoanResults",
              query: {
                data: JSON.stringify(res.data.data[0]),
                type: "申请",
              },
            });
          } else {
            this.$router.push({
              path: "LoanResults",
              query: {
                data: JSON.stringify(res.data.data[0]),
                type: "评估",
              },
            });
          }
        } else {
          ;
          let params1 = {

            accessCode: "2be57fb50e5245978a6e5d965f64f843",
            institutionId: "3220000001", //机构id
            sign: "a", //签名
            signType: "1", //签名类型
            version: "1.0.0", //版本号
            function: "offline.loan.precredit", //接口代码
            name: this.formData.HOUSEAPPLICANT, //户主姓名
            certType: this.formData.CERTYPE, //证件类型
            certNum: this.formData.CERTIFICATECODE, //证件号码
            phone: this.formData.APPLYPHONE, //手机号
            transactorName: this.formData.HOUSEAPPLICANT, //经办人姓名
            transactorNum: this.formData.CERTIFICATECODE, //经办人身份证号
            transactorPhone: this.formData.APPLYPHONE, //经办人手机号
            buildApporvalNo: this.formData.BUILDAPPORVALNO, //建房审批编号
            buildArea: this.formData.CONSTRUCITONADDRESS, //建筑区域
            areaCode: this.formData.AREACODE, //区域编码
            constructionType: this.formData.YDLX, //建设行政
            landUseType: this.formData.YDLX, //用地类型
            coverAnArea: this.formData.COVERANAREA, //占地面积
            floorArea: this.formData.HOUSEFLOORAREA, //建筑面积
            buildingHeight: this.formData.BUILDHEIGHT, //檐口高度
            structureType: this.formData.STRUCTURETYPE, //结构类型
            contractAmount: this.formData.CONTRACTAMOUNT, //合同金额
            contract:
              "https://zjseal.zjzwfw.gov.cn/api/tyyzpt/sign/downloadSignFile/39d595bb7e5a11ecba2e6c92bfce1812.pdf",
            //"contract": "http://10.145.12.79:28800/PrintServer/api/PreviewWordRpt?groupGuid=%7B9DAD7750-9499-4751-A9E5-84B2EB9D25D0%7D&toRowGuid=0a500c75-a4f3-4280-a9a2-edeb5ed6f643&dataGuid=01103ebf-a884-4282-b996-78dd64196946", //合同照片
            loanLimit: this.formData.dked + "万元及以下", //贷款额度
            interestRate: this.formData.nhll + "%", //利率
          };
          const res = await LoanPrecreditSubmit(params1);
          if (res.data.code == 200) {
            this.$toast.success("提交成功");
          } else {
            this.$toast.fail(res.data.msg);
          }
        }
      } else {
        this.$toast.fail("请勾选《个人授权书》");
      }
    },
  },
};
</script>
<style scoped lang="scss">
#LoanServicesDetail {
  height: 100vh;
  background: #fff;
  .list {
    width: 100%;
    height: calc(100vh - 100px);
    overflow: auto;
    padding: 10px;
  }
  .top {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    .name {
      font-size: 18px;
      font-weight: bold;
      color: #1a1a1a;
    }
    .dw {
      font-size: 14px;
      color: #1a1a1a;
    }
  }
  .subTitle {
    color: #3f8ffc;
    height: 40px;
    line-height: 40px;
    font-size: 16px;
  }
  .inputWrap {
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid #d2d2d2;
  }
  .text {
    font-size: 14px;
    font-weight: 400;
    color: #000000;
    line-height: 24px;
    padding: 10px;
    text-indent: 2em;
  }
  .bottom {
    padding: 10px;
    p {
      display: flex;
      justify-content: space-between;
      .van-button {
        width: 40%;
      }
    }
  }
}
</style>
<style lang="scss">
#LoanServicesDetail {
  .van-cell:not(:last-child)::after {
    left: 0;
    border-bottom: 1px solid rgb(210, 210, 210);
  }
  .van-cell {
    padding: 10px 0;
    font-size: 16px;
  }
  .van-checkbox__label {
    font-size: 14px;
  }
  .van-checkbox {
    margin-bottom: 10px;
  }
  .van-field__control {
    text-align: right;
  }
  .color .van-field__control {
    color: #e2a500;
  }
}
</style>
